<%- include("./layouts/header.ejs")%>

  <div class="main">
    <%- include("./layouts/navBar.ejs")%>
    <div class="container-fluid">
      <div class="page-title">
        <h1>所有文章</h1>
        <a href="post-add" class="btn btn-primary btn-xs">写文章</a>
      </div>
      <!-- 有错误信息时展示 -->
      <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
      <div class="page-action">
        <!-- show when multiple checked -->
        <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
        <form class="form-inline">
          <select name="" class="form-control input-sm">
            <option value="">所有分类</option>
            <option value="">未分类</option>
          </select>
          <select name="" class="form-control input-sm">
            <option value="">所有状态</option>
            <option value="">草稿</option>
            <option value="">已发布</option>
          </select>
          <button class="btn btn-default btn-sm">筛选</button>
        </form>
        <ul class="pagination pagination-sm pull-right">
          <!-- <li><a href="#">上一页</a></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">下一页</a></li> -->
        </ul>
      </div>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th class="text-center" width="40"><input type="checkbox"></th>
            <th>标题</th>
            <th>作者</th>
            <th>分类</th>
            <th class="text-center">发表时间</th>
            <th class="text-center">状态</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody>
          

        </tbody>
      </table>
    </div>
  </div>

  <%- include("./layouts/aside.ejs")%>

<%- include("./layouts/footer.ejs")%>
<!-- 引入分页模块插件 -->
<script src="/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>
<!-- art-template前端渲染模板 -->
<script type="text/template" id="postsListTmp">
   {{each posts as val key}}
      <tr>
        <td class="text-center">{{val.id}}</td>
        <td>{{val.title}}</td>
        <td>{{val.nickname}}</td>
        <td>{{val.name}}</td>
        <td class="text-center">{{val.created}}</td>
        {{if val.status=='published'}}
          <td class="text-center">已发布</td>
        {{else if val.status=='drafted'}}
          <td class="text-center">草稿</td>
        {{else }}
         <td class="text-center">回收站</td>
         {{/if}}
        <td class="text-center">
          <a href="/postsEdit?id={{val.id}}"  class="btnEdit btn btn-default btn-xs">编辑</a>
          <a href="javascript:;" data-id="{{val.id}}" class="btnDel btn btn-danger btn-xs">删除</a>
        </td>
      </tr>
    {{/each}}
</script>

<!-- 文章页面的操作 -->
<script>
  var totalPages = 0; // 设置总页数
  var currentPage = 1; // 设置当前页
  //1.发送异步ajax请求,获取渲染页面的数据
  $.ajax({
    type: "get",
    url: "/getPostsData",
    dataType:"json",
    success: function(res){
      //准备模板渲染页面
      var htmlStr = template("postsListTmp",res)
      $("tbody").html(htmlStr)
      
      // 调用分页
       pagination(res.totalCount)
    }
  })

  // 将分页功能封装在一个函数
  function pagination(totalPages){
    //启用分页插件
    $(".pagination").twbsPagination({
      totalPages: totalPages, // 总页数
      visiblePages: 9, // 当前能够显示的页码条数
      first: '第一页',
      prev: '上一页',
      next: '下一页',
      last: '最后一页',
      initiateStartPageClick: false,// 默认一开始加载的时候，不要打印页码数

      onPageClick: function (event, page) {
      //  console.log(page); //  获取的就是当前的页码数
        renderPosts(page);
        currentPage = page;
      }
    })
  }

  //封装一个渲染当前页面中文章数据的函数
  function renderPosts(page) {
    $.ajax({
      type: 'get',
      url: '/getPostsDataByPage',
      data: {
        page: page
      },
      dataType: 'json',
      success: function (res) {
        // 重新渲染页面
        var htmlStr = template('postsListTmp', res)
        $('tbody').html(htmlStr)
      }
    })
  }

  //2.删除文章
  //2.1使用委托注册事件
  $("tbody").on("click",".btnDel",function(){
    //2.2发送ajax请求
    $.ajax({
      type:"get",
      url:"/delPostsById",
      data: {id:$(this).attr("data-id")},
      dataType: "json",
      success: function(res){
        if(res && res.code==0){
          // 重新发送请求，来获取当前页下面的文章数据
          renderPosts(currentPage); // 再去查询当前页面的数据
        }
      }
    })
  })

 
</script>